<template>
  <div class="border-line card">
    <header-title title="保租房人员申请情况" @fullScreen="handleFullScreen"></header-title>
    <!-- <div @mouseenter="clearAutoPlay" @mouseleave="setAutoPlay">
      <echarts-view ref="echarts" class="card-content" :options="option" height="260px"></echarts-view>
    </div> -->
    <div style="display: flex">
      <div class="construction-icon">
        <!-- <img style="height: 10%; width: 100%" src="@/assets/construction.png" alt="" /> -->
        <svg
          t="1734595030474"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="10322"
          width="200"
          height="120"
        >
          <path
            d="M985.31555555 912.49777778h-36.40888888V342.47111111c0-22.94556445-8.83484445-44.41656889-24.87523556-60.45809778S886.51889778 257.13777778 863.57333333 257.13777778H730.45333333V125.15555555c0-22.94556445-8.83484445-44.41656889-24.87523555-60.45809777C689.53656889 48.65706667 668.06556445 39.82222222 645.12 39.82222222H161.56444445c-47.68085333 0-86.47111111 38.28053333-86.47111112 85.33333333v787.34222223H38.68444445c-20.10794667 0-36.40888889 16.30094222-36.4088889 36.40888889s16.30094222 36.40888889 36.4088889 36.40888888h946.6311111c20.10794667 0 36.40888889-16.30094222 36.4088889-36.40888888s-16.30094222-36.40888889-36.4088889-36.40888889zM863.57333333 328.81777778c7.91096889 0 13.65333333 5.74236445 13.65333334 13.65333333v570.02666667H730.45333333V328.81777778h133.12zM146.77333333 125.15555555c0-7.52867555 6.63552-13.65333333 14.79111112-13.65333333h483.55555555c7.91096889 0 13.65333333 5.74236445 13.65333333 13.65333333v787.34222223h-73.95555555V620.65777778c0-59.28618667-48.23381333-107.52-107.52-107.52h-147.91111111c-59.28618667 0-107.52 48.23381333-107.52 107.52V912.49777778h-75.09333334V125.15555555z m366.36444445 787.34222223H293.54666667V620.65777778c0-19.76206222 16.07793778-35.84 35.84-35.84h147.91111111c19.76206222 0 35.84 16.07793778 35.84 35.84V912.49777778z"
            fill="#ffffff"
            p-id="10323"
          ></path>
          <path
            d="M256 294.68444445h291.27111111c20.10794667 0 36.40888889-16.30094222 36.40888889-36.4088889s-16.30094222-36.40888889-36.40888889-36.40888888H256c-20.10794667 0-36.40888889 16.30094222-36.40888889 36.40888888s16.30094222 36.40888889 36.40888889 36.4088889zM256 439.18222222h291.27111111c20.10794667 0 36.40888889-16.30094222 36.40888889-36.40888889s-16.30094222-36.40888889-36.40888889-36.40888888H256c-20.10794667 0-36.40888889 16.30094222-36.40888889 36.40888888s16.30094222 36.40888889 36.40888889 36.40888889z"
            fill="#ffffff"
            p-id="10324"
          ></path>
        </svg>
      </div>
      <div class="use-of-funds">
        <div class="funds-item">
          <div>申请总人数：<span>2000</span>人</div>
        </div>
        <div class="funds-item">
          <div>审核通过人数：<span>4000</span>人</div>
        </div>
        <div class="funds-item">
          <div>退出人数：<span>200</span>人</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import headerTitle from './headerTitle.vue'
import { echartsView } from '@/components'
// import * as echarts from 'echarts'
import axios from 'axios'
export default {
  props: {
    areaID: {
      type: Number,
      default: 0,
    },
    isFullscren: {
      type: Boolean,
      default: false,
    },
  },
  components: {
    headerTitle,
    echartsView,
  },
  data() {
    return {
      autoPlayer: null,
      totalPeople: '',
      option: {},
    }
  },
  mounted() {
    this.fetchData()
  },
  watch: {
    areaID: function (newVal, oldVal) {
      this.fetchData()
    },
  },
  methods: {
    fetchData() {
      axios.get(`http://222.85.201.111:8026/api/statistics/Get_KB_BZFSFX?RegionNo=${this.areaID}`).then((response) => {
        const xAxisData = []
        const btbzData = []
        const lhbzData = []
        const swbzData = []
        const zbzData = []
        const {
          data: { DATA: res, Total },
        } = response
        this.totalPeople = `保障方式分析（全市保障总户数${Total}户）`
        res.forEach((e) => {
          const { BTBZHS, LHBZHS, SWBZHS, ZBZHS, simname, name } = e
          xAxisData.push(this.isFullscren && this.areaID !== 0 ? name : simname)
          btbzData.push(BTBZHS)
          lhbzData.push(LHBZHS)
          swbzData.push(SWBZHS)
          zbzData.push(ZBZHS)
        })
        const barWidth = 40
        this.option = {
          color: [
            {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                { offset: 0, color: 'rgba(44, 222, 221, 1)' }, // 设置颜色渐变
                { offset: 1, color: 'rgba(8, 149, 224, 1)' },
              ],
            },
            {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                { offset: 0, color: 'rgba(200, 53, 38, 1)' },
                { offset: 1, color: 'rgba(242, 88, 73, 1)' },
              ],
            },
            'rgba(255, 238, 10, 1)',
          ],
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'none',
            },
            formatter: (params, ticket, callback) => {
              return `<div>
                <div style="margin-bottom: 6px">${params[1].name}</div>
                <div style="margin-bottom: 6px">${params[1].marker}&nbsp;${params[1].seriesName}&nbsp;&nbsp;&nbsp;&nbsp;${params[1].value}</div>
                <div style="margin-bottom: 6px">${params[4].marker}&nbsp;${params[4].seriesName}&nbsp;&nbsp;&nbsp;&nbsp;${params[4].value}</div>
                <div style="margin-bottom: 6px">${params[7].marker}&nbsp;${params[7].seriesName}&nbsp;&nbsp;&nbsp;&nbsp;${params[7].value}</div>
                <div style="margin-bottom: 0">${params[10].marker}&nbsp;${params[10].seriesName}&nbsp;&nbsp;&nbsp;&nbsp;${params[10].value}</div>
              </div>`
            },
          },
          legend: {
            top: 0,
            left: 0,
            bottom: 10,
            textStyle: {
              color: '#fff',
            },
          },
          grid: {
            left: 0,
            right: 0,
            top: 40,
            bottom: '3%',
            containLabel: true,
          },
          yAxis: [
            {
              type: 'value',
              splitNumber: 4,
              axisTick: {
                // 刻度线
                show: false,
              },
              axisLine: {
                show: false,
              },
              splitLine: {
                // 网格线
                show: false,
                lineStyle: {
                  type: 'dashed',
                  color: 'rgba(127, 214, 255, 1)',
                },
              },
            },
            {
              type: 'value',
              axisTick: {
                // 刻度线
                show: false,
              },
              axisLine: {
                show: false,
              },
              splitLine: {
                // 网格线
                show: false,
              },
            },
          ],
          xAxis: [
            {
              type: 'category',
              axisTick: {
                show: false,
              },
              axisLine: {
                show: false,
                lineStyle: {
                  color: 'rgba(0,228,255,1)',
                },
              },
              axisLabel: {
                inside: false,
                textStyle: {
                  color: '#fff',
                  fontWeight: 'normal',
                  fontSize: 12,
                },
                margin: 20, // 刻度标签与轴线之间的距离。
              },
              data: xAxisData,
            },
            {
              type: 'category',
              axisLine: {
                show: false,
              },
              axisTick: {
                show: false,
              },
              axisLabel: {
                show: false,
              },
              splitArea: {
                show: false,
              },
              splitLine: {
                show: false,
              },
              data: xAxisData,
            },
            // {
            //   type: 'category',
            //   data: xAxisData,
            //   axisTick: {
            //     // 刻度线
            //     show: false
            //   },
            //   axisLine: {
            //     // 坐标轴
            //     show: false
            //   },
            //   splitLine: {
            //     // 网格线
            //     show: false
            //   }
            // }
          ],
          animation: false,
          series: [
            // 头
            {
              name: '总保障户数',
              type: 'pictorialBar',
              symbolSize: [barWidth, 10],
              symbolOffset: [-96, -5],
              symbolPosition: 'end',
              z: 15,
              color: '#1761BF',
              zlevel: 2,
              data: zbzData,
              label: {
                show: false,
                position: 'top',
                formatter: '{c} 户',
                color: '#fff',
                fontSize: 16,
                offset: [-96, 0],
              },
            },
            // 中间
            {
              name: '总保障户数',
              type: 'bar',
              barGap: '60%',
              barWidth: barWidth,
              itemStyle: {
                color: {
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  type: 'linear',
                  global: false,
                  colorStops: [
                    {
                      // 第一节下面
                      offset: 0,
                      color: '#1761BF',
                    },
                    {
                      offset: 1,
                      color: '#1761BF',
                    },
                  ],
                },
                borderColor: {
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  type: 'linear',
                  global: false,
                  colorStops: [
                    {
                      // 第一节下面
                      offset: 0,
                      color: '#1761BF',
                    },
                    {
                      offset: 1,
                      color: '#1761BF',
                    },
                  ],
                },
                borderWidth: 1,
                borderType: 'solid',
              },
              zlevel: 2,
              data: zbzData,
            },
            // 尾部
            {
              name: '总保障户数',
              type: 'pictorialBar',
              symbolSize: [barWidth, 10],
              symbolOffset: [-96, 5],
              z: 12,
              color: '#1761BF',
              data: zbzData,
            },
            // 头
            {
              name: '实物保障户数',
              type: 'pictorialBar',
              symbolSize: [barWidth, 10],
              symbolOffset: [-32, -5],
              symbolPosition: 'end',
              z: 15,
              color: '#1491BD',
              zlevel: 2,
              data: swbzData,
              label: {
                show: false,
                position: 'top',
                formatter: '{c} 户',
                color: '#fff',
                fontSize: 16,
                offset: [-32, 0],
              },
            },
            // 中间
            {
              name: '实物保障户数',
              type: 'bar',
              barGap: '60%',
              barWidth: barWidth,
              itemStyle: {
                color: {
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  type: 'linear',
                  global: false,
                  colorStops: [
                    {
                      // 第一节下面
                      offset: 0,
                      color: '#1491BD',
                    },
                    {
                      offset: 1,
                      color: '#1491BD',
                    },
                  ],
                },
                borderColor: {
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  type: 'linear',
                  global: false,
                  colorStops: [
                    {
                      // 第一节下面
                      offset: 0,
                      color: '#1491BD',
                    },
                    {
                      offset: 1,
                      color: '#1491BD',
                    },
                  ],
                },
                borderWidth: 1,
                borderType: 'solid',
              },
              zlevel: 2,
              data: swbzData,
            },
            // 尾部
            {
              name: '实物保障户数',
              type: 'pictorialBar',
              symbolSize: [barWidth, 10],
              symbolOffset: [-32, 5],
              z: 12,
              color: '#1491BD',
              data: swbzData,
            },
            // 头
            {
              name: '补贴保障户数',
              type: 'pictorialBar',
              symbolSize: [barWidth, 10],
              symbolOffset: [32, -5],
              symbolPosition: 'end',
              z: 15,
              color: '#28AEA7',
              zlevel: 2,
              data: btbzData,
              label: {
                show: false,
                position: 'top',
                formatter: '{c} 户',
                color: '#fff',
                fontSize: 16,
                offset: [32, 0],
              },
            },
            // 中间
            {
              name: '补贴保障户数',
              type: 'bar',
              barGap: '60%',
              barWidth: barWidth,
              itemStyle: {
                color: {
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  type: 'linear',
                  global: false,
                  colorStops: [
                    {
                      // 第一节下面
                      offset: 0,
                      color: '#28AEA7',
                    },
                    {
                      offset: 1,
                      color: '#28AEA7',
                    },
                  ],
                },
                borderColor: {
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  type: 'linear',
                  global: false,
                  colorStops: [
                    {
                      // 第一节下面
                      offset: 0,
                      color: '#28AEA7',
                    },
                    {
                      offset: 1,
                      color: '#28AEA7',
                    },
                  ],
                },
                borderWidth: 1,
                borderType: 'solid',
              },
              zlevel: 2,
              data: btbzData,
            },
            // 尾部
            {
              name: '补贴保障户数',
              type: 'pictorialBar',
              symbolSize: [barWidth, 10],
              symbolOffset: [32, 5],
              z: 12,
              color: '#28AEA7',
              data: btbzData,
            },
            // 头
            {
              name: '轮候保障户数',
              type: 'pictorialBar',
              symbolSize: [barWidth, 10],
              symbolOffset: [96, -5],
              symbolPosition: 'end',
              z: 15,
              color: '#21A47A',
              zlevel: 2,
              data: lhbzData,
              label: {
                show: false,
                position: 'top',
                formatter: '{c} 户',
                color: '#fff',
                fontSize: 16,
                offset: [96, 0],
              },
            },
            // 中间
            {
              name: '轮候保障户数',
              type: 'bar',
              barGap: '60%',
              barWidth: barWidth,
              itemStyle: {
                color: {
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  type: 'linear',
                  global: false,
                  colorStops: [
                    {
                      // 第一节下面
                      offset: 0,
                      color: '#21A47A',
                    },
                    {
                      offset: 1,
                      color: '#21A47A',
                    },
                  ],
                },
                borderColor: {
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  type: 'linear',
                  global: false,
                  colorStops: [
                    {
                      // 第一节下面
                      offset: 0,
                      color: '#21A47A',
                    },
                    {
                      offset: 1,
                      color: '#21A47A',
                    },
                  ],
                },
                borderWidth: 1,
                borderType: 'solid',
              },
              zlevel: 2,
              data: lhbzData,
            },
            // 尾部
            {
              name: '轮候保障户数',
              type: 'pictorialBar',
              symbolSize: [barWidth, 10],
              symbolOffset: [96, 5],
              z: 12,
              color: '#21A47A',
              data: lhbzData,
            },
          ],
          dataZoom: [
            {
              xAxisIndex: 0, // 这里是从X轴的0刻度开始
              show: false, // 是否显示滑动条，不影响使用
              type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
              startValue: 0, // 从头开始。
              endValue: 3, // 一次性展示多少个。
            },
          ],
        }
        this.$nextTick(() => {
          this.setAutoPlay()
        })
      })
    },
    setAutoPlay() {
      this.clearAutoPlay('setAutoPlay')
      this.autoPlayer = setInterval(() => {
        if (this.option.dataZoom[0].endValue === 7) {
          this.option.dataZoom[0].endValue = 3
          this.option.dataZoom[0].startValue = 0
        } else {
          this.option.dataZoom[0].endValue = this.option.dataZoom[0].endValue + 1
          this.option.dataZoom[0].startValue = this.option.dataZoom[0].startValue + 1
        }
      }, 3000)
    },
    clearAutoPlay() {
      if (!this.$isEmpty(this.autoPlayer)) {
        clearInterval(this.autoPlayer)
      }
    },
    handleFullScreen() {
      this.$emit('fullScreen')
    },
  },
}
</script>
<style lang="less" scoped>
.card {
  height: 280px;
  margin-left: 10px;
  &-content {
    margin-top: 10px;
  }
}
.use-of-funds {
  font-size: 18px;
  right: 0;
  float: right;
  margin-right: 30px;
  line-height: 80px;
  .funds-item {
    display: flex;
    div {
      margin: 0 20px;
    }
    span {
      font-weight: 600;
      font-size: 20px;
    }
  }
}
.construction-icon {
  margin: auto;
}
</style>
